body{
     background-color:#2c2f32;
     overflow-x: hidden;
}
.sidebar {
     position: fixed;
     width: 90px;
     height: 100%;
     z-index: 1000;
     background: #656567;
 }
.sidebar div img
{
    width:75px; 
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.sidebar  img
{
    width:30px; 
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.sidebar div{
    background-color:#2c2f32;
}
 .content {
     margin-left: 90px;
     width: auto;
     position: relative;
     overflow: auto;
     z-index: 1;
 }

.off-canvas.is-open {
    -webkit-transform: translateX(500px);
    -ms-transform: translateX(500px);
    transform: translateX(500px);
}


.off-canvas.position-left {
  width: 500px;
  left: -500px;
}



.off-canvas-wrapper, .off-canvas-content{
     overflow:hidden;
     
}

.off-canvas-content  {
	  transition: width 0.5s ease;	
}

.position-left.is-open ~ .off-canvas-content { 
	transform: translateX(500px);
    width: calc(100% - 500px);

}

.off-canvas{
     margin-left:90px;
     background-color:#252526;
     height:100%;
     
}
.header-bar{
     position: fixed;
     background-color:#656567;
     height:75px;
     width: 100%;

}
.menu-bar{
     background-color:#111111;
     color:#FFFFFF;
     height:75px;
     width: 100%;     

}
.insideScroll{
	overflow:auto;
	height:100%;
}
.menu-content{
	height:90%;
}
.vertical_menu, .vertical_menu label, .vertical_menu label > * {
	color: #EEEEEE;
	background-color: transparent;
	border: none;
}
.vertical_menu label{
	font-weight: bold;	
}

.vertical_menu label > *:hover, #scriptList li li .scriptTooltip:hover{
	color: #c6a5e5;	
	font-weight: bold;
	cursor: pointer;
}

.vertical_menu{
	margin:25px;
	margin-left: 40px;
	
}
.vertical_menu h3{
	font-size:20px;
    font-weight: bold;
    margin-top:20px;
    margin-left:-15px;
}
.vertical_menu h3 label{
	display: inline;
}
.vertical_menu h3:after{
    content:' ';
    display:block;
    border:0.5px solid #ccc;
}
.vertical_menu h4{
	font-size:16px;
	font-weight: bold;	
	margin-left:-10px;
	margin-top:10px;
	
}
.wrapper{
     width: 100%;
     height: 75px;
     padding-left: 30px;
     display:table-cell; 
     vertical-align:middle;
}
.menu-bar .wrapper h2{
     font-size:20px;
     font-family: "Helvetica",'Arial', sans-serif;
     font-weight: bold;
     margin: 0;
}

.sidebar-button{
    display: inline-block;
    width: 100%;
    height:75px;
    color: #FFFFFF;
}
.sidebar-button:hover{
    background-color:#111111;
}

.selected{
    background-color:#252526;
}


.console{
    width: 100%;
    height: 80px;
    color: #EEEEEE;
}


.console form {
    margin-top: 20px;
}
.console form label{
    margin-top: 4px;
    color: #EEEEEE;
    margin-left:10px;
    font-size:17px;
    float: left;
}
.console form input[type="text"]
{
    display: inline;
    background: transparent;
    width: calc(100% - 100px);
    border: none;
    outline: none;
    box-shadow: none;
    color:#EEEEEE
}

.console form input[type="submit"]
{
    float: right;
    margin-right:10px;
    display: inline;
    border: none;
    background: #000000;
    margin-top: 12px;
    color:#EEEEEE

}
.container {    
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height: calc(100vh - 75px);
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: overflow;
    margin-top: -25px;
    
    
    
}
.out_container {
    overflow: auto;
    height: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    flex:1;
    flex-basis:100%;
}
.tabs{
	background-color: #111111;
	border:none;
}
.tabs-title a{
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	padding: 0.5rem 1.25rem;
	background-color:white;
	color: black;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true']{
	color: white;
	background-color: #252526;
}
.tabs-content, .tabs-panel{
	background-color: transparent;
	border: none;
    padding: 0;
    height:90%
}


.collapsibleList li{
    padding: 0;
    margin:0;
    background: none no-repeat top left;
	list-style-image : none;
	list-style-type : none;	
  	list-style-position: inside;
  	line-height: 1.5;
}

.collapsibleList li li {
    background-image: url('/img/list-item.png');
    cursor: auto;
    padding-left: 2.5em;
    font-size: 14px;
}

li.collapsibleListOpen{
	background-image : url('/img/list-item-root.png');
  	list-style-image : url('/img/button-open.png');
  	cursor           : pointer;
}

li.collapsibleListClosed{
  	list-style-image : url('/img/button-closed.png');
  	cursor           : pointer;
}
.collapsibleList li li:last-child , .collapsibleList li li.lastScript{
    background-image: url('/img/list-item-last.png');
}

.collapsibleList {
	margin: 0;
    padding: 0;
}
 
.collapsibleList ul {
	margin: 0;
    padding: 0;
}

/*Bye bye scrollbars*/
/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,255.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,255,255,255.4); 
}
/* Tooltip container */
.scriptTooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.scriptTooltip .tooltiptext {
    display: none;
    width: 350px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    font-size: 12px;
    

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 30%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.scriptTooltip .tooltiptext::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 20px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.scriptTooltip:hover .tooltiptext {
    display: block;
    opacity: 1;
}
    
    
    